<template>
  <div class="home-container">
    <div class="home-container__top">
      <img src="../../assets/img/personal-cover.png" alt="">
    </div>
    <div class="home-container__bottom">
      <div class="home-container__bottom-center">
        <div class="bottom-container__bg"></div>
        <div class="bottom-container">
          <div class="bottom-left">
            <user-card from="my" :userId="this.$store.state.userProfile.userId"></user-card>
            <card-container v-if="myTopicList.length>0" style="margin-top: 16px"  title="我创建的话题"  @listenCardConMore="$router.push({path:'/personal-center/home/topic',query:{type:'my'}})" more="更多">
              <nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="topic-content__c" v-for="(val,index) in myTopicList" :key="val.topicId" >
                <p>#{{val.topicName}}#</p>
                <h6>{{val.referenceCount}}</h6>
              </nuxt-link>
            </card-container>

            <card-container v-if="noticeTopicList.length>0" style="margin-top: 16px"  title="我关注的话题"  @listenCardConMore="$router.push({path:'/personal-center/home/topic',query:{type:'notice'}})" more="更多">
              <nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="topic-content__c" v-for="(val,index) in noticeTopicList" :key="val.topicId" >
                <p>#{{val.topicName}}#</p>
                <h6>{{val.referenceCount}}</h6>
              </nuxt-link>
            </card-container>
          </div>
          <div class="bottom-right">
            <div class="bottom-right__tab">
              <div class="tab__left">
                <nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/home/blog'}">
                  <p class="abs"></p>
                  <p class="word">博客</p>
                  <p class="line" v-if="selected==='personal-center-home-blog'"></p>
                </nuxt-link>
                <nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/home/project'}">
                  <p class="abs"></p>
                  <p class="word">项目</p>
                  <p class="line" v-if="selected==='personal-center-home-project'"></p>
                </nuxt-link>

                <nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/home/question'}">
                  <p class="abs"></p>
                  <p class="word">问题</p>
                  <p class="line" v-if="selected==='personal-center-home-question'"></p>
                </nuxt-link>
                <nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/home/answer'}">
                  <p class="abs"></p>
                  <p class="word">回答</p>
                  <p class="line" v-if="selected==='personal-center-home-answer'"></p>
                </nuxt-link>
                <nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/home/dynamic'}">
                  <p class="abs"></p>
                  <p class="word">动态</p>
                  <p class="line" v-if="selected==='personal-center-home-dynamic'"></p>
                </nuxt-link>
                <nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/home/topic',query:{type:'my'}}">
                  <p class="abs"></p>
                  <p class="word">话题</p>
                  <p class="line" v-if="selected==='personal-center-home-topic'"></p>
                </nuxt-link>
                <nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/home/info'}">
                  <p class="abs"></p>
                  <p class="word">资料</p>
                  <p class="line" v-if="selected==='personal-center-home-info'"></p>
                </nuxt-link>
              </div>
              <p class="tab__right">
              </p>
            </div>
            <div style="min-height:556px">

            <transition name="fade-transform" mode="out-in">
                <nuxt-child ></nuxt-child>
            </transition>
            </div>

          </div>
        </div>

        <page-footer></page-footer>
      </div>


    </div>

  </div>
</template>

<script>
  import UserCard from '../../components/pc/userCard';
  import ProjectCard from '../../components/pc/projectCard';
  import CardContainer from '../../components/pc/cardContainer';
  import PageFooter from '../../components/pc/pageFooter';
  import config from "../../action/config";
  export default {
    layout: 'only-header',
    data(){
      return{
        userId:'',
        myTopicList:[],
        noticeTopicList:[],
        // selected: this.$route.name
      }
    },
    components:{
      UserCard,ProjectCard,CardContainer,PageFooter
    },

    watch:{
      $route(to,from){
        this.myTopicList = [];
        this.noticeTopicList = [];
        if(this.$route.name){
          this.selected = this.$route.name;
          if(this.$route.name==='personal-center-home-topic'&&this.$route.query.type==='my'){
            this.dataGetNoticeTopic();
          }
          if(this.$route.name==='personal-center-home-topic'&&this.$route.query.type==='notice'){
            this.dataGetMyTopic();

          }
        }
      }
    },

    created(){
      this.selected = this.$route.name;
      if(this.$route.name==='personal-center-home-topic'&&this.$route.query.type==='my'){
        this.dataGetNoticeTopic();
      }
      if(this.$route.name==='personal-center-home-topic'&&this.$route.query.type==='notice'){
        this.dataGetMyTopic();

      }
    },


    methods:{
      dataGetMyTopic(){
          this.$axios.$get(config.api.get.Topic.myList, {
            params: {
              page: 1,
              size: 10
            }
          }).then((response) => {
            this.myTopicList = response.data.dataList;
          })
      },

      dataGetNoticeTopic(){
        this.$axios.$get(config.api.get.Topic.myfollowedList,{
          params:{
            page:1,
            size:10
          }
        }).then((response)=>{
          this.noticeTopicList = response.data.records;
        })
      },


    },

  }


</script>

<style lang="scss" scoped>

  html{
    background-image: $bgImage;

  }
  .home-container{


    align-items: flex-start;
    .home-container__top{
      width:100%;
      height:auto;
      z-index: 100;
      position: relative;
      img{
        width:100%;
        min-height:270*$length;
        background-color:#B9A3D2 ;
        height:auto;
      }
    }
    .home-container__bottom{
      position:relative;
      margin:0 auto;
      .home-container__bottom-center{
        position:absolute;
        top:  -60*$length;
        left:0;
        right:0;
        background-image: $bgImage;

        .bottom-container__bg{
          background-image: $bgImage;
          position:absolute;
          top:  60*$length;
          left:0;
          right:0;
          z-index: -1;

        }
        .bottom-container{
          position:relative;
          z-index: 200;
          padding-bottom: 32*$length;
          width: $pageWidth;
          margin:0 auto;
          @extend %flex-row-spb;
          align-items: flex-start;
          .bottom-left{
            width:302*$length;

            .topic-content__c{
              @extend %flex-row-spb;
              @extend %cursorPointer;
              padding:0 16*$length;
              box-sizing: border-box;
              margin-top:20*$length;
              p{
                width:190*$length;
                @include fontStyle(12,16,500,#333,left);
                @extend %nowrap;
                @extend %animate-transition;

                &:hover{
                  color:#00AAE6
                }
              }

              h6{
                @include fontStyle(12,16,500,#ccc,left);
                @extend %nowrap;
              }
            }

          }
          .bottom-right{
            width:938*$length;
            .bottom-right__tab{
              box-sizing: border-box;
              height:62*$length;
              padding:18*$length 24*$length;
              border-bottom:1px solid #EFEFEF;

              @extend %flex-row-spb;
              .tab__left{
                @extend %flex-row-spb;

                .left__item{
                  position:relative;
                  @extend %flex-column-spb;
                  margin-right: 24*$length;

                  .abs{
                    position:absolute;

                  }

                  .word{
                    @include fontStyle(14,19,500,rgba(255,255,255,.6),center);
                    @extend %animate-transition;
                    @extend %cursorPointer;
                    &:hover{
                      color:#fff
                    }
                  }
                  .line{
                    position:absolute;
                    top:32*$length;
                    margin:0 auto;
                    left:0;
                    right:0;
                    width:16*$length;
                    height:4*$length;
                    border-radius:2px  2px 0 0;
                    background-color: #00AAE6;
                  }
                }
              }
              .tab__right{
                @include fontStyle(12,16,500,#999,center);
                @extend %animate-transition;
                @extend %cursorPointer;
                &:hover{
                  color:#00AAE6
                }
              }
            }
          }
        }

      }
    }
  }
</style>
